<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">生产报表</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<view style="height: 138upx;" class="padding-tb-20 padding-lr-30">
			<view class="search-fixed bg-blue" :style="{marginTop: CustomBar + 'px'}">
				<!-- 时间选择器 -->
				<view class="flex align-center date-select u-font-weight6 bg-blue">
					<picker mode="date" :value="date" start="1970-01-01" @change="DateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
					<text class="ph-sousuoshijian position-text text-blue"></text>
				</view>
			</view>
		</view>
		<!-- 主题内容 -->
		<view class="padding-t">
			<view class="public-main-info">
				<!-- 吨钢辊号对比 -->
				<view class="u-main">
					<view class="u-main-title">生产统计报表</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<!-- 下面表格 -->
						<view class="u-table">
							<view>
								<view class="u-table-head">
									<view class="u-font-weight width200 text-center solid r-height15">班组</view>
									<view class="u-font-weight width200 text-center solid r-height15">成材率(%)</view>
									<view class="u-font-weight text-center solid">
										<view class="r-height10">
											轧废
										</view>
										<view class="flex">
											<view class="width200 solid r-height5">块数</view>
											<view class="width200 solid r-height5">重量(t)</view>
										</view>
									</view>
									<view class="u-font-weight text-center solid">
										<view class="r-height10">
											回炉坯
										</view>
										<view class="flex">
											<view class="width200 solid r-height5">块数</view>
											<view class="width200 solid r-height5">重量(t)</view>
										</view>
									</view>
									<view class="u-font-weight text-center solid">
										<view class="r-height5">
											合格产品
										</view>
										<view class="flex">
											<view class="solid r-height5">
												<view>中板</view>
												<view class="flex">
													<view class="width200 solid r-height5">块数</view>
													<view class="width200 solid r-height5">重量(t)</view>
												</view>
											</view>
											<view class="solid r-height5">
												<view>卷板</view>
												<view class="flex">
													<view class="width200 solid r-height5">块数</view>
													<view class="width200 solid r-height5">重量(t)</view>
												</view>
											</view>
										</view>
									</view>
									<!-- <view class="u-font-weight width200 text-center solid r-height15">不合格品</view> -->
								</view>
								<view class="">
									<view class="u-table-bady-column" v-for="(item, index) in tableData" :key="index">
										<view class="r-height5 text-center width200 solid">{{item.team}}</view>
										<view class="r-height5 text-center width200 solid">{{item.yield}}</view>
										<view class="r-height5 text-center width200 solid">{{item.scrapNum}}</view>
										<view class="r-height5 text-center width200 solid">{{item.scrapTonnes | filterTons}}</view>
										<view class="r-height5 text-center width200 solid">{{item.reheatNum}}</view>
										<view class="r-height5 text-center width200 solid">{{item.reheatTones | filterTons}}</view>
										<view class="r-height5 text-center width200 solid">{{item.middleNum}}</view>
										<view class="r-height5 text-center width200 solid">{{item.middleWeight | filterTons}}</view>
										<view class="r-height5 text-center width200 solid">{{item.productNum}}</view>
										<view class="r-height5 text-center width200 solid">{{item.productTones | filterTons}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="u-main">
					<view class="u-main-title">
						合格率统计
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<!-- 下面表格 -->
						<view class="u-table">
							<view>
								<view class="u-table-head">
									<view class="u-table-head-item u-font-weight">钢种</view>
									<view class="u-table-head-item u-font-weight">厚度范围</view>
									<view class="u-table-head-item u-font-weight">宽度范围</view>
									<view class="u-table-head-item u-font-weight">块数</view>
									<view class="u-table-head-item u-font-weight">重量(t)</view>
									<view class="u-table-head-item u-font-weight">合格率(%)</view>
									
								</view>
								<view class="">
									<view class="u-table-bady-column" v-for="(goodCountItem, indexs) in goodCount" :key="indexs">
										<view class="u-table-head-item">{{goodCountItem.steelType}}</view>
										<view class="u-table-head-item">{{goodCountItem.thickRange}}</view>
										<view class="u-table-head-item">{{goodCountItem.widthRange}}</view>
										<view class="u-table-head-item">{{goodCountItem.num}}</view>
										<view class="u-table-head-item">{{Number(goodCountItem.weight).toFixed(1)}}</view>
										<view class="u-table-head-item">{{Number(goodCountItem.passRate).toFixed(1)}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 个品规合格率 -->
				<view class="u-main" v-show="false">
					<view class="u-main-title">
						各品规合格率
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding-lr-30">
						<!-- 钢种分类 -->
						<view class="dashed-bottom padding-tb-30">
							<view class="flex">
								<view class="pei-250">
									<u-charts
									 :canvas-id="steelState.id" 
									 :chartType="steelState.chartType"
									 :cWidth="steelState.cWidth" 
									 :cHeight="steelState.cHeight" 
									 :title="steelState.title"
									 :extra="steelState.extra"
									 :opts="steelState.opts"
									 :ref="steelState.id" />
								</view>
								<view class="width100 margin-tb-auto">
									<view class="flex echarts-legend-height dashed-bottom" :class="item.classname" v-for="(item,index) in steelList" :key="index">
										<view class="basis-sm">{{item.classification}}</view>
										<view class="basic-default">{{item.tonnes}}</view>
										<view class="basic-default">{{item.percentage}}%</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 厚度范围 -->
						<view class="dashed-bottom padding-tb-30">
							<view class="flex">
								<view class="pei-250">
									<u-charts
									 :canvas-id="thinkAbout.id" 
									 :chartType="thinkAbout.chartType"
									 :cWidth="thinkAbout.cWidth" 
									 :cHeight="thinkAbout.cHeight" 
									 :title="thinkAbout.title"
									 :extra="thinkAbout.extra"
									 :opts="thinkAbout.opts"
									 :ref="thinkAbout.id" />
								</view>
								<view class="width100 margin-tb-auto">
									<view class="flex echarts-legend-height dashed-bottom" :class="item.classname" v-for="(item,indes) in thinkList" :key="indes">
										<view class="basis-sm">{{item.classification}}</view>
										<view class="basic-default">{{item.tonnes}}</view>
										<view class="basic-default">{{item.percentage}}%</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 宽度范围 -->
						<view class="dashed-bottom padding-tb-30">
							<view class="flex">
								<view class="pei-250">
									<u-charts
									 :canvas-id="widthAbout.id" 
									 :chartType="widthAbout.chartType"
									 :cWidth="widthAbout.cWidth" 
									 :cHeight="widthAbout.cHeight" 
									 :title="widthAbout.title"
									 :extra="widthAbout.extra"
									 :opts="widthAbout.opts"
									 :ref="widthAbout.id" />
								</view>
								<view class="width100 margin-tb-auto">
									<view class="flex echarts-legend-height dashed-bottom" :class="item.classname" v-for="(item,indess) in widthList" :key="indess">
										<view class="basis-sm">{{item.classification}}</view>
										<view class="basic-default">{{item.tonnes}}</view>
										<view class="basic-default">{{item.percentage}}%</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="u-main" v-show="false">
					<view class="u-main-title">
						班组合格率
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<view class="flex">
							<view style="width: 50%;">
								<view class="team-info flex">
									<view class="day-charts">
										<u-charts 
										 class="day-charts"
										 :canvas-id="tearms.id" 
										 :chartType="tearms.chartType"
										 :cWidth="tearms.cWidth" 
										 :cHeight="tearms.cHeight" 
										 :opts="tearms.opts"
										 :ref="tearms.id" />
									</view>
									<view class="margin-tb-auto width100">
										<view class="team-info-title u-font-weight">00.00%</view>
										<view class="u-font-weight6">甲班统计</view>
									</view>
								</view>
								<view class="team-info flex">
									<view class="day-charts">
										<u-charts 
										 class="day-charts"
										 :canvas-id="tearms.id" 
										 :chartType="tearms.chartType"
										 :cWidth="tearms.cWidth" 
										 :cHeight="tearms.cHeight" 
										 :opts="tearms.opts"
										 :ref="tearms.id" />
									</view>
									<view class="margin-tb-auto width100">
										<view class="team-info-title u-font-weight">00.00%</view>
										<view class="u-font-weight6">丙班统计</view>
									</view>
								</view>
							</view>
							<view style="width: 50%;">
								<view class="team-info flex">
									<view class="day-charts">
										<u-charts 
										 class="day-charts"
										 :canvas-id="tearms.id" 
										 :chartType="tearms.chartType"
										 :cWidth="tearms.cWidth" 
										 :cHeight="tearms.cHeight" 
										 :opts="tearms.opts"
										 :ref="tearms.id" />
									</view>
									<view class="margin-tb-auto width100">
										<view class="team-info-title u-font-weight">00.00%</view>
										<view class="u-font-weight6">乙班统计</view>
									</view>
								</view>
								<view class="team-info flex">
									<view class="day-charts">
										<u-charts 
										 class="day-charts"
										 :canvas-id="tearms.id" 
										 :chartType="tearms.chartType"
										 :cWidth="tearms.cWidth" 
										 :cHeight="tearms.cHeight" 
										 :opts="tearms.opts"
										 :ref="tearms.id" />
									</view>
									<view class="margin-tb-auto width100">
										<view class="team-info-title u-font-weight">00.00%</view>
										<view class="u-font-weight6">丁班统计</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post, getTime } from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_REPORT_QUALITY_RATE, GET_REPORT_PRODUCTION_INFO} from '@/common/api/report.js'
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				date: '',
				tableData: [],
				dayData: {
					opts: {
						series: [{
							name : "未完成率",
							data: 0,
							color: '#d9d9d9'
						},
						{
							name : "完成率",
							data: 0,
							color: '#3088f4'
						}]
					},
					cWidth: uni.upx2px(300),
					cHeight: uni.upx2px(300),
					chartType: "ring",
					title: {name: '钢种范围'},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "state"
				}, // 每日产量的echarts配置
				tearms: {
					opts: {
						series: [{
							name : "未完成率",
							data: 0,
							color: '#d9d9d9'
						},
						{
							name : "完成率",
							data: 0,
							color: '#3088f4'
						}]
					},
					cWidth: uni.upx2px(110),
					cHeight: uni.upx2px(110),
					chartType: "ring",
					extraType: "",
					id: "datInfo"
				}, // 每日产量的echarts配置
				steelState: {
					opts: {
						series: [{
							name : "@235B",
							data: 0,
							color: '#3088F4'
						},
						{
							name : "Q345B",
							data: 0,
							color: '#08d5a5'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '钢种分类', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "reportSteelfenlei"
				},
				thinkAbout: {
					opts: {
						series: [{
							name : "新水用量",
							data: 0,
							color: '#3088F4'
						},
						{
							name : "净河水",
							data: 0,
							color: '#08d5a5'
						},
						{
							name : "净环水",
							data: 0,
							color: '#ffb708'
						},
						{
							name : "软水",
							data: 0,
							color: '#7130f4'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '厚度范围', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "thinkabout"
				},
				widthAbout: {
					opts: {
						series: [{
							name : "压缩空气",
							data: 0,
							color: '#3088F4'
						},
						{
							name : "氮气",
							data: 0,
							color: '#08d5a5'
						},
						{
							name : "氧气",
							data: 0,
							color: '#ffb708'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '宽度范围', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "widthabout"
				},
				colorListBlock: ['block-blue', 'block-yellow', 'block-green', 'block-purple', 'block-orange', 'block-light-blue'],
				colorlist: ['#3088F4', '#ffb708', '#08d5a5', '#7130f4', '#f47073', '#0043fe'],
				steelList: [],
				thinkList: [],
				widthList: [],
				goodCount: []
			}
		},
		filters: {
			filterTons(val) {
				return Number(val / 1000).toFixed(3)
			}
		},
		onLoad() {
			this.date = getTime()
			this.getInfo()
			this.getSteelInfo()
			this.getThinkInfo()
			this.getWidthInfo()
			this.getGood()
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			DateChange(e) {
				this.date = e.detail.value
				this.getInfo()
				this.getSteelInfo()
				this.getThinkInfo()
				this.getWidthInfo()
			},
			async getInfo() {
				let res = await post(GET_REPORT_PRODUCTION_INFO, {
					time: this.date
				})
				if(res.code == 0) {
					this.tableData = res.data
				}
			},
			async getSteelInfo() {
				let res = await post(GET_REPORT_QUALITY_RATE, {
					time: this.date,
					dimension: 'steelType'
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i<res.data.length; i++) {
						res.data[i].classname = this.colorListBlock[i]
						data.push({
							name: res.data[i].classification,
							data: res.data[i].tonnes,
							color: this.colorlist[i]
						})
					}
					this.steelState.opts.series = data
					this.steelList = res.data
				}
			},
			async getThinkInfo() {
				let res = await post(GET_REPORT_QUALITY_RATE, {
					dimension: 'thickness',
					time: this.date,
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i<res.data.length; i++) {
						res.data[i].classname = this.colorListBlock[i]
						data.push({
							name: res.data[i].classification,
							data: res.data[i].tonnes,
							color: this.colorlist[i]
						})
					}
					this.thinkAbout.opts.series = data
					this.thinkList = res.data
				}
			},
			async getWidthInfo() {
				let res = await post(GET_REPORT_QUALITY_RATE, {
					dimension: 'width',
					time: this.date
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i<res.data.length; i++) {
						res.data[i].classname = this.colorListBlock[i]
						data.push({
							name: res.data[i].classification,
							data: res.data[i].tonnes,
							color: this.colorlist[i]
						})
					}
					this.widthAbout.opts.series = data
					this.widthList = res.data
				}
			},
			async getGood() {
				let res = await post('/ProductionReport/qualificationRateStatistics', {
					time: this.date
				})
				console.log('生产报表', res)
				if(res.code == 0) {
					this.goodCount = res.data
				}
			}
		}
	}
</script>

<style>
	.width200 {
		width: 150upx;
	}
	.r-height5 {
		height: 50upx;
		line-height: 50upx;
	}
	.r-height10 {
		height: 100upx;
		line-height: 100upx;
	}
	.r-height15 {
		height: 150upx;
		line-height: 150upx;
	}
</style>
